<template>
  <div>
    <el-row class="lock-btn">
      <el-button-group style="margin-left: 1%;float: left;margin-left: 0.6%;margin-top: 0.2%;">
        <el-button :disabled="userState" size="medium" type="primary" @click="addBtn" round>添加</el-button>
        <el-button :disabled="userState" size="medium" type="danger" round @click="batchDelete">删除</el-button>
      </el-button-group>
      <el-input v-model="queryForm.cardNo" style="width: 15%;float: left;margin-left: 1%;" clearable placeholder="请输入卡号">
      </el-input>
      <el-input v-model="queryForm.phone" style="width: 15%;float: left;margin-left:5px;" clearable placeholder="请输入手机号">
      </el-input>
      <el-button :disabled="userState" style="margin-left: 0.6%;margin-top: 0.2%;" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
    </el-row>
    <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="ebCardTable" @cell-dblclick="handleCellDbclick" v-loading="loading" :data="ebCard" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
          <el-table-column type="selection" :reserve-selection="true" width="55" fixed></el-table-column>
          <el-table-column prop="cardNo" label="卡号" width="240" sortable  align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="150" sortable align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="120" sortable align="center"></el-table-column>
          <el-table-column prop="idCard" label="身份证号" width="240" sortable align="center"></el-table-column>
          <el-table-column prop="balance" label="余额" width="120" sortable align="center"></el-table-column>
          <el-table-column prop="parkfieldIds" label="设置场站" width="120"  align="center">
           <template slot-scope="scope">
              <el-tag v-if="scope.row.parkfieldIds == null" size="medium" type="danger">未设置</el-tag>
              <el-tag v-else-if="scope.row.parkfieldIds != null" size="medium" type="success">已设置</el-tag>
           </template> 
           </el-table-column>
          <el-table-column prop="managerName" label="管理账户" width="120"  align="center"></el-table-column>
     
          <el-table-column prop="status" label="状态" width="120" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == '0'" size="medium" type="info" effect="dark">未使用</el-tag>
              <el-tag v-else-if="scope.row.status == '1'" size="medium" type="success" effect="dark">使用中</el-tag>
              <el-tag v-else-if="scope.row.status == '2'" size="medium" type="warning" effect="dark">挂失中</el-tag>
              <el-tag v-else-if="scope.row.status == '3'" size="medium" type="danger" effect="dark">注销</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == '1'" :disabled="userState" size="mini" type="success" @click="goRecharger(scope.$index, scope.row)" title="充值">充值</el-button>
              <el-button v-if="scope.row.status == '1'" :disabled="userState" size="mini" type="warning" @click="reportLossEBCard(scope.$index, scope.row)" title="挂失">挂失</el-button>
              <el-button v-if="scope.row.status == '2'" :disabled="userState" size="mini" type="warning" @click="reportLossEBCardNo(scope.$index, scope.row)" title="挂失">取消挂失</el-button>
              <el-button v-if="scope.row.status != '3'" :disabled="userState" size="mini" type="danger" @click="cancelEBCard(scope.$index, scope.row)" title="注销">注销</el-button>             
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange"></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="充值" :visible.sync="rechargerDialog" :width="'422px'" :destroy-on-close="true">
      <el-form :model="form" :rules="ebCardRules" ref="form">
        <el-form-item label="卡号" :label-width="labelWidth" prop="cardNo">
          <el-input v-model="form.cardNo" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="labelWidth" prop="phone">
          <el-input v-model="form.phone" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="余额" :label-width="labelWidth" prop="balance">
          <el-input v-model="form.balance" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="充值金额" :label-width="labelWidth" prop="amount">
          <el-input v-model="form.amount" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargerDialog = false">取 消</el-button>
        <el-button type="primary" @click="recharger">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加" :visible.sync="addDialog" :width="'422px'" :destroy-on-close="true">
      <el-form :model="addForm" :rules="addRules" ref="addForm">
        <el-form-item label="姓名" :label-width="labelWidth" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="卡号" :label-width="labelWidth" prop="cardNo">
          <el-input v-model="addForm.cardNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="labelWidth" prop="phone">
          <el-input v-model="addForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="labelWidth" prop="idCard">
          <el-input v-model="addForm.idCard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="充值金额" :label-width="labelWidth" prop="balance">
          <el-input v-model="addForm.balance" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { loadEBCardApi, rechargerApi, cancelEBCardApi, reportLossEBCardApi, addApi, delApi, batchDelApi } from "../../api/EBDeposit.js";
import { getNickName, getTestUserName, getRoleId } from "../../util/auth";
export default {
  name: "ebCard",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      loading: false,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      rechargerDialog: false,
      labelWidth: "100px",
      selected: "",
      ebCard: [],
      form: {
        cardNo: '',
        phone: '',
        amount: '',
        balance: '',
      },
      queryForm: {
        cardNo: '',
        phone: '',
      },
      
      roleIndex: true,
      addForm: {
        name: null,
        cardNo: null,
        phone: null,
        idCard: null,
        balance: null,
      },
      addDialog: false,

      ebCardRules: {
        amount: [
            { required: true, message: '请输入充值金额', trigger: 'blur' },
            { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确的充值金额' },
          ],
      },

      addRules: {
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
        cardNo: [
            { required: true, message: '请输入卡号', trigger: 'blur' },
          ],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
        idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
          ],
      },

    };
  },
  methods: {
 
    handleCellDbclick (row, column, cell, event) {
      console.log(column.property);
      if (column.property === "userName") {
        this.userForm = {
          id: row.lockId,
          userId: row.userId
        };
      } else {
        
      }
    },

    queryBtn () {
      let _this = this
      _this.loading = true
     
      _this.loadEBCard (_this.pageNo, _this.pageSize, _this.queryForm)
      
    },

    addBtn () {
      let _this = this;
      _this.addForm = {
        name: null,
        cardNo: null,
        phone: null,
        idCard: null,
        balance: null,
      };
      _this.addDialog = true;
    },

    add (){
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (valid) {
          if(_this.addForm.balance == null){
            _this.addForm.balance = 0
          }
          addApi(_this.addForm).then(resp => {
            _this.addDialog = false
            if (resp.errmsg === 'ok') {
                _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
                _this.$notify({
                  title: '成功',
                  message: '添加成功',
                  type: 'success'
                })
              } else {
                _this.$notify({
                  title: '失败',
                  message: '添加失败',
                  type: 'error'
                })
              }
          });
        }
      })
    },

    del (index, row) {
      let _this = this
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      })
        .then(_ => {
          delApi(row).then(function (resp) {
            if (resp.errmsg === 'ok') {
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              })
            }else {
                _this.$notify({
                  title: '失败',
                  message: '删除失败',
                  type: 'error'
                })
              }
          })
        })
    },

    batchDelete () {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择",
          type: "warning"
        });
        return;
      }
      let _this = this;
      this.$confirm('确认批量删除', '提示', {
        type: 'warning'
      })
        .then(_ => {

          batchDelApi(this.multipleSelection).then(function (resp) {
            if (resp.errmsg === "ok") {
              _this.multipleSelection = []
              _this.$refs.ebCardTable.clearSelection();
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
            }else {
              _this.$notify({
                title: "失败",
                message: "删除失败",
                type: "error"
              });
            }
          });

        })

    },

    recharger () {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (valid) {
          rechargerApi(_this.form.cardNo, _this.form.amount).then(resp => {
            console.log(resp)
            if (resp.data === "OK") {
              _this.rechargerDialog = false;
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: "成功",
                message: "充值成功",
                type: "success"
              });
            }else {
              _this.$notify({
                title: "失败",
                message: "充值失败",
                type: "error"
              });
            }
          });
        }
      });
    },

    goRecharger (index, row) {
      let _this = this;
      _this.form = {
        cardNo: row.cardNo,
        phone: row.phone,
        amount: '',
        balance: row.balance,
      };
      console.log(_this.form)
      _this.rechargerDialog = true;
      // _this.$nextTick(()=>{
      //   if(_this.$refs.form != undefined){
      //     _this.$refs.form.resetFields();
      //   }
      // })
    },

    cancelEBCard (index, row) {
      let _this = this;
      this.$confirm('确认注销', '提示', {
        type: 'warning'
      })
        .then(_ => {
          row.status = 3
          cancelEBCardApi(row).then(function (resp) {
            if (resp.errmsg === "ok") {
              _this.multipleSelection = []
              _this.$refs.ebCardTable.clearSelection();
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: "成功",
                message: "注销成功",
                type: "success"
              });
            }else {
              _this.$notify({
                title: "失败",
                message: "注销失败",
                type: "error"
              });
            }
          });
        })
    },

    reportLossEBCard (index, row) {
      let _this = this;
      this.$confirm('确认挂失', '提示', {
        type: 'warning'
      })
        .then(_ => {
          row.status = 2
          reportLossEBCardApi(row).then(function (resp) {
            if (resp.errmsg === "ok") {
              _this.multipleSelection = []
              _this.$refs.ebCardTable.clearSelection();
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: "成功",
                message: "挂失成功",
                type: "success"
              });
            }else {
              _this.$notify({
                title: "失败",
                message: "挂失失败",
                type: "error"
              });
            }
          });
        })
    },

    reportLossEBCardNo (index, row) {
      let _this = this;
      this.$confirm('确认取消挂失', '提示', {
        type: 'warning'
      })
        .then(_ => {
          row.status = 1
          reportLossEBCardApi(row).then(function (resp) {
            if (resp.errmsg === "ok") {
              _this.multipleSelection = []
              _this.$refs.ebCardTable.clearSelection();
              _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
              _this.$notify({
                title: "成功",
                message: "取消挂失成功",
                type: "success"
              });
            }else {
              _this.$notify({
                title: "失败",
                message: "取消挂失失败",
                type: "error"
              });
            }
          });
        })
    },

    handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.loadEBCard(this.pageNo, this.pageSize, this.queryForm);
    },
    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.loadEBCard(this.pageNo, this.pageSize, this.queryForm);
    },
    handleTableChange (val) {
      this.multipleSelection = val;
    },
    
    loadEBCard (pageNo, pageSize, queryForm) {
      let _this = this;
      _this.loading = true;
      loadEBCardApi(pageNo, pageSize, queryForm.cardNo, queryForm.phone.replace(/\s*/g, "")).then(resp => {
        if (resp.errmsg === "ok") {
            _this.total = resp.data.totalNum;
            _this.ebCard = resp.data.dataList;
            console.log("_this.ebCard: {}", _this.ebCard)
          }
        _this.loading = false;
      })
      .catch(function (e) {
          console.log(e);
      });
    },

  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      let _this = this;    
      this.roleIndex = getRoleId()==1?false:true;
 
       _this.loadEBCard(_this.pageNo, _this.pageSize, _this.queryForm);
      this.$store.dispatch("loadStatus");
      this.$store.dispatch("loadType");
    });
  },
};
</script>

<style scoped>
.page-tool {
  background: white;
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
</style>
